<!DOCTYPE html>

<html>

	<head>
		<meta charset="utf-8">
		<title>基于 layui 的极简社区页面模版</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="keywords" content="fly,layui,前端社区">
		<meta name="description" content="Fly社区是模块化前端UI框架Layui的官网社区，致力于为web开发提供强劲动力">
		<link rel="stylesheet" href="../res/layui/css/layui.css">
		<link rel="stylesheet" href="../res/css/global.css">
		<link rel="stylesheet" href="../layer/mobile/need/layer.css" />
		<script type="text/javascript" src="../layer/layer.js"></script>
		<script type="text/javascript" src="../res/js/jquery-1.11.3.min.js"></script>
		<style type="text/css">
			.fly-avatar img {
				width: 60px;
				height: 60px;
				border-radius: 100%;
			}
			/*隐藏滚动条*/
			body {
				background: #ffffff;
				overflow-x: hidden;
				overflow-y: hidden;
			}
			.fly-list li {
				height: 100%;
				margin-top: 10px;
			}
			
			.fly-list-info {
				margin-left: 16px;
			}
			
			.fly-list li h2 {
				margin-left: 85px;
				margin-top: 9px;
			}
			
			.fly-list li h2 a {
				padding-top: 15px;
				margin-top: 10px;
			}
			
			.layui-textarea {
				min-height: 20px;
				width: 90%;
				margin-left: 10px;
				margin-bottom: 10px;
			}
			
			.site-demo-flow img {
				width: 32%;
				height: 32%;
			}
		</style>
	</head>

	<body style="margin-top: 10px;">

		<div class="layui-container">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md8">
					<div class="fly-panel">
						<!--评论区-->
						<div class="fly-list-info">
							<i class="iconfont icon-pinglun1" title="评论" style="cursor: pointer;">
											<textarea placeholder="请输入内容" class="layui-textarea" style="min-height:150px"></textarea>
											
										</i>

						</div>

						<div class="layui-upload" style="width: 90%;margin-left: 26px;">
							<button type="button" class="layui-btn" id="test2">图片上传</button><input class="layui-upload-file" type="file" name="file" multiple="">
							<div class="site-demo-flow" id="LAY_demo3" style="margin-top: 5px;">
								<img src="https://gw.alicdn.com/bao/uploaded/i2/701696736/TB2PNl5ahQa61Bjy0FhXXaalFXa_!!701696736.jpg_400x400q90.jpg?t=1516269303876" layer-index="0">
								<img src="https://gw.alicdn.com/bao/uploaded/i2/162734861/TB2V5rsX_gc61BjSZFkXXcTkFXa_!!162734861.jpg_400x400q90.jpg?t=1516269303876" layer-index="1">
								<img src="https://gw.alicdn.com/bao/uploaded/i4/69476562/TB2htq4XTka61BjSszfXXXN8pXa_!!69476562.jpg_400x400q90.jpg?t=1516269303876" layer-index="2">
								<img src="https://gw.alicdn.com/bao/uploaded/i1/180558071/TB2sy6jXMQc61BjSZFGXXa1DFXa_!!180558071.jpg_400x400q90.jpg?t=1516269303876" layer-index="3">
								<img src="https://gw.alicdn.com/bao/uploaded/i2/701696736/TB2PNl5ahQa61Bjy0FhXXaalFXa_!!701696736.jpg_400x400q90.jpg?t=1516269303876" layer-index="0">
								<img src="https://gw.alicdn.com/bao/uploaded/i2/162734861/TB2V5rsX_gc61BjSZFkXXcTkFXa_!!162734861.jpg_400x400q90.jpg?t=1516269303876" layer-index="1">
								<img src="https://gw.alicdn.com/bao/uploaded/i4/69476562/TB2htq4XTka61BjSszfXXXN8pXa_!!69476562.jpg_400x400q90.jpg?t=1516269303876" layer-index="2">
								<img src="https://gw.alicdn.com/bao/uploaded/i1/180558071/TB2sy6jXMQc61BjSZFGXXa1DFXa_!!180558071.jpg_400x400q90.jpg?t=1516269303876" layer-index="3">
								<img src="https://gw.alicdn.com/bao/uploaded/i2/701696736/TB2PNl5ahQa61Bjy0FhXXaalFXa_!!701696736.jpg_400x400q90.jpg?t=1516269303876" layer-index="0">
								<img src="https://gw.alicdn.com/bao/uploaded/i2/162734861/TB2V5rsX_gc61BjSZFkXXcTkFXa_!!162734861.jpg_400x400q90.jpg?t=1516269303876" layer-index="1">
								<img src="https://gw.alicdn.com/bao/uploaded/i4/69476562/TB2htq4XTka61BjSszfXXXN8pXa_!!69476562.jpg_400x400q90.jpg?t=1516269303876" layer-index="2">
								<img src="https://gw.alicdn.com/bao/uploaded/i1/180558071/TB2sy6jXMQc61BjSZFGXXa1DFXa_!!180558071.jpg_400x400q90.jpg?t=1516269303876" layer-index="3">
								<img src="https://gw.alicdn.com/bao/uploaded/i2/701696736/TB2PNl5ahQa61Bjy0FhXXaalFXa_!!701696736.jpg_400x400q90.jpg?t=1516269303876" layer-index="0">
								<img src="https://gw.alicdn.com/bao/uploaded/i2/162734861/TB2V5rsX_gc61BjSZFkXXcTkFXa_!!162734861.jpg_400x400q90.jpg?t=1516269303876" layer-index="1">
								<img src="https://gw.alicdn.com/bao/uploaded/i4/69476562/TB2htq4XTka61BjSszfXXXN8pXa_!!69476562.jpg_400x400q90.jpg?t=1516269303876" layer-index="2">
								<img src="https://gw.alicdn.com/bao/uploaded/i1/180558071/TB2sy6jXMQc61BjSZFGXXa1DFXa_!!180558071.jpg_400x400q90.jpg?t=1516269303876" layer-index="3">

							</div>
						</div>

						<!--提交区域-->
						<div class="layui-input-block" style="margin-top: 10px;margin-bottom: 10px;">
							<button class="layui-btn" lay-submit="" lay-filter="demo1">发布</button>
							<button type="reset" class="layui-btn layui-btn-primary" id="cennl">取消</button>
						</div>

					</div>

				</div>
			</div>

		</div>
		</div>

		<script src="../res/layui/layui.js"></script>
		<script>
		/*取消跳转到主页*/
		$("#cennl").off().on("click",function(){
				location.href = 'index2.html';
		})
			/*对图片进行一个预览*/
			layui.use('layer', function() {
				var layer = layui.layer;
				layer.photos({
					photos: '#LAY_demo3',
					anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
				});

			});
			layui.use('upload', function() {
				var upload = layui.upload;
				//多图片上传
				upload.render({
					elem: '#test2',
					url: '/upload/',
					multiple: true,
					before: function(obj) {
						//预读本地文件示例，不支持ie8
						obj.preview(function(index, file, result) {
							$('#demo2').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
						});
					},
					done: function(res) {
						//上传完毕
					}
				});
				/*//执行实例
				var uploadInst = upload.render({
					elem: '#test2' //绑定元素
						,
					url: '/upload/' //上传接口
						,
					done: function(res) {
						//上传完毕回调
					},
					error: function() {
						//请求异常回调
					}
				});*/
			});
		</script>
	</body>

</html>